<template>
	<div style="height: 100%;">
		<div style="padding: 20px;">
			<Row style="text-align: left;margin-top: 41px;">
				<Col span="12" style="text-align: left;">
				<span style="border-left: 5px solid #517EDB;font-size: 16px;"></span>
				<span style="font-size: 16px;font-weight: 800;margin-left: 41px;">科目列表</span>
				</Col>
				<Button style="float: right;background-color: orange;color: white;" @click="addsubject">+&nbsp;新增选科</Button>
			</Row>
			<Col v-if="sortSettingHidden" span="10" style=" width: 600px; z-index: 1000;background-color: white;margin:0 auto;position: absolute;top: 200px;left: 0;right: 0;text-align: left;height:500px;border: 1px solid #e9eaec;padding: 50px;border-radius: 15px;">
			<Row style="width: 100%;text-align: center;margin-bottom: 20px;">
				<span style="margin-bottom: 20px;font-size: 21px;">{{title}}</span>
			</Row>
			<Row style="font-size: 15px;">
				<Col style="text-align: center;padding: 10px;">
				<span>选&nbsp;&nbsp;科&nbsp;&nbsp;名&nbsp;&nbsp;称&nbsp;:</span>
				<Input v-model="subjectName" type="text" placeholder="选科名称" style="text-align: center; width: 50%;position: relative;"></Input>
				</Col>
				<Col style="text-align: center;padding: 10px;">
				<span>校&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;区:</span>
				<Select v-model="subjectSchool"  style="text-align: center; width: 50%;position: relative;" @on-change="subjectSchoolChange">
					<Option v-for="item in subjectSchoolList" :value="item.label" :key="item.label">{{item.label}}</Option>
				</Select>
				</Col>

				<Col style="text-align: center;padding: 10px;">
				<span>选科届年级&nbsp;&nbsp;&nbsp;:</span>
				<Select v-model="subjectGrade"  style="text-align: center; width: 50%;position: relative;" @on-change="subjectGradeChange">
					<Option v-for="item in subjectGradeList" :value="item.label" :key="item.label">{{item.label}}</Option>
				</Select>
				</Col>
				<Col style="text-align: center;padding: 10px;">
				<span>入&nbsp;&nbsp;学&nbsp;&nbsp;年&nbsp;&nbsp;份&nbsp;:</span>
				<Select v-model="subjectYear"  style="text-align: center; width: 50%;position: relative;" @on-change="subjectYearChange">
					<Option v-for="item in subjectYearList" :value="item.label" :key="item.label">{{item.label}}</Option>
				</Select>
				</Col>
				<Col style="text-align: center;padding: 10px;">
				<span>选科开始时间:</span>
				<Input v-model="subjectstartTime" type="date" placeholder="选科开始时间" style="text-align: center; width: 50%;position: relative;"></Input>
				</Col>
				<Col style="text-align: center;padding: 10px;">
				<span>选科结束时间:</span>
				<Input v-model="subjectnameendTime" type="date" placeholder="选科结束时间" style="text-align: center; width: 50%;position: relative;"></Input>
				</Col>

			</Row>

			<Row style="text-align: center;">
				<Col span="24" style="margin-top:15px">
				<Button type="ghost" @click="cancel" icon="close-round" style="margin-right: 20px;">取消</Button>
				<Button v-if="this.title=='新增选科'?true:false" type="primary" @click="savesort" icon="checkmark-round">保存</Button>
				<Button v-if="this.title=='编辑选科'?true:false" type="primary" @click="editsavesort" icon="checkmark-round">保存</Button>
				</Col>
			</Row>
			</Col>
			<div  v-for="(item,index) in subjectList" @mouseover="mouseOver(index)" @mouseout="mouseOut(index)" :key="item.subjectid" style="float: left; display: inline-block;width: 18%;margin: 10px 1%;height: 200px;border: 1px #e4e5e7 solid;">
				<div style="display: block;" @click="detail(item.subjectid,item.name,item.progress,item.starttime,item.endtime,item.year,item.grade,item.showsmall,item.school)">
					<img style="height: 130px;width: 100%;display: block;" :src="item.imgurl">
				</div>
				<div v-if="item.progress=='0%'?true:false" style=" height: 20px;width: 100%;display: block;background-color: #000000; opacity: 0.3;text-align: center;color: white;">未开始</div>
				<div v-if="item.progress!='0%'&&item.progress!='100%'?true:false" style="height: 20px;width: 100%;display: block;background-color: #000000; opacity: 0.3;text-align: center;color: white;">已选{{item.progress}}</div>
				<div v-if="item.progress=='100%'?true:false" style="height: 20px;width: 100%;display: block;background-color: #000000; opacity: 0.3;text-align: center;color: white;">已结束</div>
				<div style="height: 50px;width: 100%;display: block;">
					<div style="padding: 5px;height: 30px;display: block;">
						<span style="float: left;height: 20px;line-height: 20px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{item.name}}</span>
						<div style="float: right;border: 1px solid #57A3F3;height: 18px;border-radius: 5px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"><span style="margin: 0 2px;">{{item.school}}</span></div>
					</div>
					<div style="height: 20px;width: 100%;display: block;padding: 0 5px;">
						<i class="iconfont alicon-shijian" style="color: black;float: left;font-size: 13px;"></i>
						<span style="float: left;margin-left: 2px;" :class="item.progress=='0%'?'red':'gray'">{{item.starttime}}~{{item.endtime}}</span>
					</div>
				</div>
				<div style="float: right;position: relative;top: -187px;right: 10px;" v-if="item.showsmall==true?true:false">
					<div style="display: inline-block; background-color: #000000; opacity: 0.3;border-radius:6px;">
						<i class="iconfont alicon-edit" @click="gotoedit(index)" style="z-index: 1000;color: white;margin: 5px;"></i>
					</div>
					<div style="display: inline-block; background-color: #000000; opacity: 0.3;border-radius:6px;">
						<i class="iconfont alicon-delete" @click="gotodel(index)" style="z-index: 1000;color: white;margin: 5px;"></i>
					</div>
				</div>
			</div>

		</div>
	</div>
</template>

<script>
	import { setlocalstorage, setsessionstorage, removesessionstorage, removelocalstorage } from "@/components/js/Localstorage.js"
	export default {
		data() {
			return {
				//				isend:false,
				listProgress:"", 
				listImgurl:"",
				obj:"",
				title:"",
				subjectSchool:"本校区",
				subjectName:"",
				subjectGrade:"高一",
				subjectYear:"2018届",
				subjectstartTime:"",
				subjectid:"",
				subjectnameendTime:"",
				endLogTimeDate: "",
				myDate: "",
				nowTime: "",
				sortSettingHidden: false,
				subjectSchoolList:[
				{
					value:1,
					label:"本校区",
				},
				{
					value:2,
					label:"其他校区",
				},
				],
				subjectList: [{
						subjectid: "1",
						name:"2017届(高二)选科",
						progress: "0%",
						starttime: "2018-06-01",
						endtime: "2018-06-30",
						year: "2017届",
						grade:"高二",
						school:"本校区",
						showsmall: false,
						imgurl: require('../../../assets/2017-5.png'),
//						imgurl2: require('../../../assets/2017-5over.png'),
					},
					{
						subjectid: "2",
						name:"2016届(高三)选科",
						progress: "70%",
						starttime: "2018-06-01",
						endtime: "2018-06-30",
						year: "2016届",
						grade:"高三",
						school:"本校区",
						showsmall: false,
						imgurl: require('../../../assets/2016-6.png'),
//						imgurl2: require('../../../assets/2016-6over.png'),
					},
					{
						subjectid: "3",
						name:"2016届(高三)选科",
						progress: "70%",
						starttime: "2018-06-01",
						endtime: "2018-06-30",
						year: "2016届",
						grade:"高三",
						school:"本校区",
						showsmall: false,
						imgurl: require('../../../assets/2016-6.png'),
//						imgurl2: require('../../../assets/2016-6over.png'),
					},
					{
						subjectid: "4",
						name:"2018届(高一)选科",
						progress: "20%",
						starttime: "2018-06-01",
						endtime: "2018-06-30",
						year: "2018届",
						grade:"高一",
						school:"本校区",
						showsmall: false,
						imgurl: require('../../../assets/2018-4.png'),
//						imgurl2: require('../../../assets/2018-4over.png'),
					},
					{
						subjectid: "5",
						name:"2018届(高一)选科",
						progress: "100%",
						starttime: "2018-06-01",
						endtime: "2018-06-30",
						year: "2018届",
						grade:"高一",
						school:"本校区",
						showsmall: false,
						imgurl: require('../../../assets/2018-4.png'),
//						imgurl2: require('../../../assets/2018-4over.png'),
					},
					{
						subjectid: "6",
						name:"2017届(高二)选科",
						progress: "0%",
						starttime: "2018-06-01",
						endtime: "2018-06-30",
						year: "2017届",
						grade:"高二",
						school:"本校区",
						showsmall: false,
						imgurl: require('../../../assets/2017-5.png'),
//						imgurl2: require('../../../assets/2017-5over.png'),
					},
					{
						subjectid: "7",
						name:"2016届(高三)选科",
						progress: "70%",
						starttime: "2018-06-01",
						endtime: "2018-06-30",
						year: "2016届",
						grade:"高三",
						school:"本校区",
						showsmall: false,
						imgurl: require('../../../assets/2016-6.png'),
//						imgurl2: require('../../../assets/2016-6over.png'),
					},
					{
						subjectid: "8",
						name:"2016届(高三)选科",
						progress: "70%",
						starttime: "2018-06-01",
						endtime: "2018-06-30",
						year: "2016届",
						grade:"高三",
						school:"本校区",
						showsmall: false,
						imgurl: require('../../../assets/2016-6.png'),
//						imgurl2: require('../../../assets/2016-6over.png'),
					},
					{
						subjectid: "9",
						name:"2018届(高一)选科",
						progress: "20%",
						starttime: "2018-06-01",
						endtime: "2020-06-30",
						year: "2018届",
						grade:"高一",
						school:"本校区",
						showsmall: false,
						imgurl: require('../../../assets/2018-4.png'),
//						imgurl2: require('../../../assets/2018-4over.png'),
					},
					{
						subjectid: "10",
						name:"2018届(高一)选科",
						progress: "100%",
						starttime: "2018-06-01",
						endtime: "2021-06-30",
						year: "2018届",
						grade:"高一",
						school:"本校区",
						showsmall: false,
						imgurl: require('../../../assets/2018-4.png'),
//						imgurl2: require('../../../assets/2018-4over.png'),
					},
				],
				subjectYearList: [{
						value: "4",
						label: "2018届"
					},
					{
						value: "5",
						label: "2017届"
					},
					{
						value: "6",
						label: "2016届"
					},

				],
				subjectGradeList: [{
						value: "4",
						label: "高一"
					},
					{
						value: "5",
						label: "高二"
					},
					{
						value: "6",
						label: "高三"
					},
				],

			}
		},
		created() {
			this.getTime();
		},
		methods: {
			gotoedit:function(index){
				this.title="编辑选科"
				this.sortSettingHidden=true
				this.obj=index
				this.listProgress= this.subjectList[index].progress
				this.listImgurl=this.subjectList[index].imgurl
				this.subjectSchool=this.subjectList[index].school
				this.subjectName=this.subjectList[index].name
				this.subjectGrade=this.subjectList[index].grade
				this.subjectYear=this.subjectList[index].year
				this.subjectstartTime=this.subjectList[index].starttime
				this.subjectnameendTime=this.subjectList[index].endtime
			},
			detail: function(subjectid,name,progress,starttime,endtime,year,grade,showsmall,school) {
				setsessionstorage('xkpksubjectid',subjectid);
				setsessionstorage('xkpkname',name);
				setsessionstorage('xkpkprogress',progress);
				setsessionstorage('xkpkstarttime',starttime);
				setsessionstorage('xkpkendtime',endtime);
				setsessionstorage('xkpkyear',year);
				setsessionstorage('xkpkgrade',grade);
				setsessionstorage('xkpkshowsmall',showsmall);
				setsessionstorage('xkpkschool',school);
        		this.$router.push({name:'selectionManageDetail'})
			},
			gotodel: function(index) {
				this.subjectList.splice(index, 1)
			},
			mouseOver: function(index) {
				this.subjectList[index].showsmall = true
			},
			mouseOut: function(index) {
				this.subjectList[index].showsmall = false
			},
			addsubject: function() {
				this.title="新增选科"
				this.sortSettingHidden = true
				this.subjectSchool="本校区"
				this.subjectName=""
				this.subjectGrade="4"
				this.subjectYear="4"
				this.subjectstartTime=""
				this.subjectnameendTime=""
			},
			getTime: function() {
				this.nowTime = new Date();
				for(var i = 0; i < this.subjectList.length; i++) {
					this.myDate = this.subjectList[i].endtime
					this.endLogTimeDate = new Date(Date.parse(this.myDate.replace(/-/g, "/")));
					//					console.log(this.endLogTimeDate)
					if(this.endLogTimeDate > this.nowTime) {
						this.isend = true;
					} else {
						this.isend = false;
					}
				}
			},
			cancel:function(){
				this.sortSettingHidden=false
			},
			subjectGradeChange:function(){},
			savesort:function(){
				if(this.subjectName==""){
					alert('选科名称不能为空')
				}else if(this.subjectstartTime==""){
					alert('选科开始时间不能为空')
				}else if(this.subjectnameendTime==""){
					alert('选科结束时间不能为空')
				}else if(this.subjectstartTime>this.subjectnameendTime){
					alert('选科开始时间不能大于选科结束时间')
				}else{
					this.subjectList.push({
						subjectid:this.subjectList.length+1,
						name: this.subjectName,
						year: this.subjectYear,
						grade: this.subjectGrade,
						progress: "0%",
						school:this.subjectSchool,
						starttime:this.subjectstartTime,
						endtime:this.subjectnameendTime,
						showsmall: false,
					})
					this.sortSettingHidden=false
					alert('保存成功')
				}
			},
			editsavesort:function(){
				if(this.subjectName==""){
					alert('选科名称不能为空')
				}else if(this.subjectstartTime==""){
					alert('选科开始时间不能为空')
				}else if(this.subjectnameendTime==""){
					alert('选科结束时间不能为空')
				}else if(this.subjectstartTime>this.subjectnameendTime){
					alert('选科开始时间不能大于选科结束时间')
				}else{
					this.subjectList.splice(this.obj,1,{
						name: this.subjectName,
						year: this.subjectYear,
						grade: this.subjectGrade,
						progress:this.listProgress,
						imgurl:this.listImgurl,
						school:this.subjectSchool,
						starttime:this.subjectstartTime,
						endtime:this.subjectnameendTime,
						showsmall: false,
					})
				this.sortSettingHidden=false
				alert('保存成功')
				}
			},
			subjectYearChange:function(){},
			subjectSchoolChange:function(){},
		},
		mounted() {

		}
	}
</script>

<style>
	.red {
		color: red;
	}
	
	.gray {
		color: #CCCCCC;
	}
	
	.intime {}
	
	.outtime {}
</style>